<html>
<head>
    <meta charset="UTF-8">
    <title>物种</title>
</head>
<body>
<div id="content">
    <!--deal box-->
    <div class="modal fade" id="pet-order">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">确认领走<b class="text-primary">{{ pet.name }}</b></h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <img class="card-image-top" style="width: 100%;" v-show="is_logged_in" :src="imageUrl(image)">
                    <h3 class="text-danger" v-show="!is_logged_in">请先在个人中心登录</h3>
                    <a href="#" class="btn btn-primary" @Click="create_order">&ensp;确认已支付，点击领走&ensp;</a>
                    <h6 class="text-info" v-show="is_logged_in"><i>"支付后工作人员将同您取得联系，订单在个人中心查看"</i></h6>
                    <h6 class="text-warning"><b>{{ message }}</b></h6>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>
    <!--modal box-->
    <div class="modal fade" id="pet-info">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title"><b class="text-primary">{{ pet.name }}</b> 的身份信息</h3>
                    <button type="button" class="close" data-dismiss="modal" @click="reset_info">&times;</button>
                </div>
                <div class="modal-body card">
                    <img class="card-image-top" style="width: 100%;" :src="imageUrl(pet.image)">
                    <div class="card-body">
                        <h5>{{ pet.description }}</h5>
                        <h6 class="text-info">出生于：{{ pet.birthDate }}</h6>
                        <h6 class="text-info">品种是<kbd>{{ pet.speciesName }}</kbd></h6>
                        <h6 class="text-info">品种特点是：{{ pet.speciesDescription }}</h6>
                    </div>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>
    <!--page-->
    <h3 class="text-secondary">宠物之家现有成员</h3>
    <div id="pet-data-box">
        <div v-for="pet in pets" :key="pet.id" style="display: inline-block; margin: 3px;">
            <div class="card" style="width: 16rem; ">
                <img class="card-img-top" :src="imageUrl(pet.image)" alt="Card image cap">
                <div class="card-body">
                    <h4> {{ pet.name }}</h4>
                    <h6 class="text-info">{{ pet.speciesName }}</h6>
                    <p class="text-primary">￥{{ pet.price }}</p>
                    <a href="#" class="btn btn-success" data-toggle="modal" data-target="#pet-info" @click="render_modal_box(pet.id)">&ensp;信息&ensp;</a>
                    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#pet-order" @click="render_order_modal_box(pet.id)">&ensp;领走&ensp;</a>
                </div>
            </div>
        </div>
        <!--search box-->
        <div class="form-inline">
            <div class="input-group-sm">
                <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(page_index-1)">上一页</button>
                第{{ page_index }}页，共{{ page_num }}页
                <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(page_index+1)">下一页</button>
                <kbd>To</kbd>：
                <input type="text" class="form-control" style="width: 3rem;" v-model="go">
                <button class="btn btn-link border-0 btn-info" @Click="get_paging_data(go)">Go</button>
                <kbd>检索</kbd>
                &ensp;品种&ensp;
                <input type="text" class="form-control" style="width: 6rem" v-model="pointed_species" placeholder="全部品种">
            </div>
            <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(0)">搜索</button>
            <button class="btn btn-link border-0 btn-secondary" @Click="reset_search">重置</button>
        </div>
    </div>
</div>
</body>
</html>
